<!-- 融资申请管理 -->
<template>
  <div class="app-container">
    <el-tabs
      v-model="tabNum"
      @tab-click="tabClickBtn"
      style="background:#fff;padding-left:10px;"
    >
      <el-tab-pane
        label="待审批"
        name="1"
      >
        <avue-crud
          ref="crud1"
          :option="option_1"
          :data="data_1"
          :table-loading="loading_1"
          :page.sync="page_1"
          @on-load="onLoad_1"
          @search-change="searchChange_1"
          @search-reset="resetChange(1)"
          :search.sync="search_1"
        >
          <!-- <template slot="search" slot-scope="{row,size}">
            <div class="el-col el-col-10 el-col-offset-0 el-col-xs-24 el-col-sm-12 el-col-md-10 avue-form__row" style="padding-left: 10px; padding-right: 10px;">
              <div class="el-form-item el-form-item--small avue-form__item--">
                <label for="daterange" class="el-form-item__label" style="width: 130px;">日期范围:</label>
                <div class="el-form-item__content" style="margin-left: 130px;">
                  <el-date-picker v-model="search_1.daterange" type="daterange" :size="size" range-separator="至" start-placeholder="开始日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" end-placeholder="结束日期">
                  </el-date-picker>
                </div>
              </div>
            </div>
          </template> -->
          <template
            slot="menu"
            slot-scope="scope"
          >
            <el-button
              size="small"
              type="text"
              @click="verify(scope.row)"
              icon="el-icon-document-checked"
            >审核</el-button>
          </template>
        </avue-crud>
      </el-tab-pane>
      <el-tab-pane
        label="已审批"
        name="2"
      >
        <avue-crud
          ref="crud2"
          :option="option_2"
          :data="data_2"
          :table-loading="loading_2"
          :page.sync="page_2"
          @on-load="onLoad_2"
          @search-change="searchChange_2"
          @search-reset="resetChange(2)"
          :search.sync="search_2"
        >
          <template
            slot="menu"
            slot-scope="scope"
          >
            <el-button
              size="small"
              type="text"
              @click="viewOpen(scope.row)"
              icon="el-icon-document-checked"
            >查看</el-button>
            <el-button
              size="small"
              type="text"
              @click="pay(scope.row)"
              icon="el-icon-top"
              v-if="scope.row.RZZT == 3"
            >放款</el-button>
            <el-button
              size="small"
              type="text"
              @click="payTwo(scope.row)"
              icon="el-icon-top"
              v-if="scope.row.RZZT == 4"
            >结清</el-button>
          </template>
        </avue-crud>
      </el-tab-pane>
    </el-tabs>

    <el-dialog
      :title="dialogTitle"
      class="avue-dialog"
      :visible.sync="dialogVisble"
      width="60%"
      center
      @close="closeDiaBtn"
    >
      <el-steps
        :active="stepActive"
        v-if="dialogType === 'view'"
      >
        <el-step
          v-for="(i,index) in stepList"
          :key="index"
          :title="i.text"
        ></el-step>
      </el-steps>
      <simpleTable :Data="simpleTableData"></simpleTable>
      <el-tabs v-if="dialogType === 'verify'">
        <el-tab-pane label="融资审核结果">
          <el-form
            :model="verifyData"
            ref="verifyForm"
          >
            <el-form-item
              label=""
              prop="verifyResult"
            >
              <el-radio-group v-model="verifyData.verifyResult">
                <el-radio :label="3">通过</el-radio>
                <el-radio :label="6">拒绝</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              label="备注"
              prop="remark"
              v-if="verifyData.verifyResult == 6"
              :rules="[{ required: true, message: '请输入拒绝原因', trigger: 'blur' }]"
            >
              <el-input
                type="textarea"
                v-model="verifyData.remark"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="授信额度(万元)"
              prop="sxed"
              v-if="verifyData.verifyResult == 3"
              :rules="[{ required: true, message: '请输入授信额度', trigger: 'blur' }]"
            >
              <el-input
                v-model="verifyData.sxed"
                style="width:200px"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="授信额度有效期至"
              prop="sxyxq"
              v-if="verifyData.verifyResult == 3"
              :rules="[{ required: true, message: '请选择日期', trigger: 'change' }]"
            >
              <el-date-picker
                v-model="verifyData.sxyxq"
                type="date"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>

      <el-tabs v-if="dialogType === 'pay'">
        <el-tab-pane label="填写放款信息">
          <el-form
            :model="payData"
            ref="payForm"
            label-width="120px"
          >
            <el-row>
              <el-col :span="12">
                <el-form-item
                  label="金融产品名称"
                  prop="fkcp"
                >
                  <el-input
                    disabled
                    v-model="payData.fkcp"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="放款金额(万元)"
                  prop="fkje"
                  :rules="[{ required: true, message: '请输入金融放款金额', trigger: 'blur' }]"
                >
                  <el-input v-model="payData.fkje"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item
                  label="放款时间"
                  prop="fkrq"
                  :rules="[{ required: true, message: '请选择放款时间', trigger: 'blur' }]"
                >
                  <el-date-picker
                    v-model="payData.fkrq"
                    value-format="yyyy-MM-dd"
                    type="date"
                    placeholder="选择日期"
                    style="width:100%"
                  > </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="成交利率类型"
                  prop="CJLVLX"
                >
                  <el-input
                    disabled
                    v-model="payData.CJLVLX"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item
                  label="成交利率(%)"
                  prop="CJLV"
                  :rules="[{ required: true, message: '请输入成交利率', trigger: 'blur' }]"
                >
                  <el-input
                    v-model="payData.CJLV"
                    type="number"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="还款期限(个月)"
                  prop="HKQX"
                  :rules="[{ required: true, message: '请输入金融放款金额', trigger: 'blur' }]"
                >
                  <el-input
                    v-model.number="payData.HKQX"
                    type="number"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item
                  label="还款方式"
                  prop="HKFS"
                  :rules="[{ required: true, message: '请选择还款方式', trigger: 'change' }]"
                >
                  <el-select
                    v-model="payData.HKFS"
                    style="width:100%"
                  >
                    <el-option
                      v-for="item in hkOptions"
                      :key="item.fieldCode"
                      :label="item.fieldName"
                      :value="item.fieldCode"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      <!-- 结清 -->
      <el-tabs v-if="dialogType === 'payTwo'">
        <el-tab-pane label="填写放款信息">
          <el-form
            :model="payTwoData"
            ref="payTwoForm"
            label-width="120px"
          >
            <!-- <el-row>
              <el-col :span="12"> -->
            <el-form-item
              label="贷款结清时间"
              prop="hkrq"
              :rules="[{ required: true, message: '请选择贷款结清日期', trigger: 'change' }]"
            >
              <el-date-picker
                v-model="payTwoData.hkrq"
                type="date"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期"
                style="width:200px"
                :picker-options="optionsDisable"
              >
              </el-date-picker>
            </el-form-item>
            <!-- </el-col>
              <el-col :span="12"> -->
            <el-form-item label="最大逾期天数(天)">
              <el-input
                v-model="payTwoData.zdyq"
                style="width:200px"
              ></el-input>
            </el-form-item>
            <!-- </el-col>
            </el-row> -->
          </el-form>
        </el-tab-pane>
      </el-tabs>

      <el-tabs v-if="dialogType === 'view'">
        <el-tab-pane label="操作记录">
          <el-table
            :data="viewTableData"
            border
          >
            <el-table-column
              prop="cz"
              label="操作"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="czr"
              label="操作人"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="jg"
              label="操作结果"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="time"
              label="时间"
              align="center"
            ></el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <div class="dialog-footer">
        <el-button
          type="primary"
          v-if="dialogType === 'verify'"
          @click="verifySave"
          round
        >保存</el-button>
        <el-button
          type="primary"
          v-if="dialogType === 'pay'"
          @click="paySave"
          round
        >保存</el-button>
        <el-button
          type="primary"
          v-if="dialogType === 'payTwo'"
          @click="paySaveTwo"
          round
        >保存</el-button>
        <el-button
          @click="closeDiaBtn"
          type="primary"
          plain
          round
        >关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  jrRefuse,
  jrPass,
  getJrNoRzApprove,
  getJrIsRzApprove,
  getLiuc,
  jrOver,
  getBank,
  getDict,
  jrBack,
} from '@/api/manager.js'
import simpleTable from './components/simpleTable.vue'
import {
  liuDic_org,
  activeList,
  createTableData_orgFinanceApply_verify,
  org_rzsq_sh,
  createTableData_orgFinanceApply_view,
  org_rzsq_ck,
  createStepList,
  org_rzsq_sh_jq,
} from './finance.util'

const _option = {
  headerAlign: 'center',
  align: 'center',
  border: true,
  index: true,
  indexLabel: '序号',
  indexWidth: 100,
  card: true,
  labelWidth: 135,
  delBtn: false,
  editBtn: false,
  searchLabelWidth: '20%',
  searchSpan: 6,
  searchMenuSpan: 4,
  columnBtn: false,
  refreshBtn: false,
  selectClearBtn: false,
  addBtn: false,
  searchShowBtn: false,
  column: [
    {
      label: '企业名称',
      prop: 'qymc',
      search: true,
      order: 10,
      width: '350',
    },
    {
      label: '法人姓名',
      prop: 'FDDBR',
      order: 11,
    },
    {
      label: '申请产品',
      prop: 'product_name',
      order: 12,
    },
    {
      label: '需求金额(万元)',
      prop: 'XQJE',
      order: 12,
    },
    {
      label: '发布人',
      prop: 'name',
      search: true,
      order: 20,
    },
    {
      label: '发布时间',
      prop: 'APPLY_TIME',
      order: 21,
      width: '250',
    },
  ],
}

export default {
  components: {
    simpleTable,
  },
  data() {
    return {
      tabNum: '1',
      loading_1: false,
      loading_2: false,
      page_1: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
        background: false,
      },
      page_2: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
        background: false,
      },
      data_1: [],
      data_2: [],
      option_1: {},
      option_2: {},
      search_1: {
        //productName:'awd'
      },
      search_2: {},
      dialogTitle: '审核',
      dialogVisble: false,
      simpleTableData: [],
      dialogType: 'verify',
      verifyData: {
        verifyResult: 3,
        remark: '',
        sxed: '',
        sxyxq: '',
      },
      //放款信息
      payData: {
        fkcp: '',
        fkje: '',
        fkrq: '',
        CJLV: '',
        CJLVLX: '',
        HKQX: '',
        HKFS: '',
      },
      //结清信息
      payTwoData: {
        hkrq: '',
        zdyq: '',
      },
      stepActive: '',
      stepList: [],
      viewTableData: [],
      orgOptions: [],
      hkOptions: [],
      optionsDisable: this.handeleDate(),
    }
  },
  created() {
    this.getDict()
    const { column } = _option
    const rzztDicData = Object.keys(liuDic_org).map((i) => {
      return {
        label: liuDic_org[i],
        value: Number(i),
      }
    })
    //console.log('rzztDicData',rzztDicData)
    this.option_1 = {
      ..._option,
      excelBtn: true,
      selection: true,
      column: [
        ...column,
        {
          label: '日期范围',
          prop: 'daterange',
          search: true,
          hide: true,
          searchRange: true,
          type: 'daterange',
          format: 'yyyy-MM-dd',
          valueFormat: 'yyyy-MM-dd',
        },
        {
          label: '发布人联系方式',
          prop: 'pnumber',
          order: 21,
          hide: true,
        },
        {
          label: '企业地址',
          prop: 'JYCS',
          order: 22,
          hide: true,
        },
      ],
    }
    this.option_2 = {
      ..._option,
      excelBtn: false,
      column: [
        ...column,
        {
          label: '融资状态',
          prop: 'RZZT',
          search: true,
          type: 'select',
          order: 20,
          dicData: rzztDicData,
        },
      ],
    }
    //获取担保方式
    // getField({
    //     page:1,
    //     size:1000,
    //     code:'guarantee_type'
    // }).then(res => {
    //     console.log('guarantee_type',res.data.records)
    //     const options = [{label:'不限',value:'all'},...res.data.records.map(item => { return {label:item.fieldName,value:item.fieldCode}})];
    //     this.option.group[0].column.find(item => item.prop == 'infoDbfs').dicData = options;
    // });
    // //获取适用区域
    // getField({
    //     page:1,
    //     size:1000,
    //     code:'NTAREA'
    // }).then(res => {
    //     console.log('NTAREA',res.data.records)
    //     const options = [{label:'不限',value:'all'},...res.data.records.map(item => { return {label:item.fieldName,value:item.fieldCode}})];
    //     this.option.group[0].column.find(item => item.prop == 'infoArea').dicData = options;
    // });
    getBank().then((res) => {
      this.orgOptions = res.data
      console.log(res.data)
    })
  },
  computed: {
    headers() {
      return {
        TOKEN: this.$store.getters.token,
      }
    },
  },
  filters: {
    // filterQylx(val,qylxList){
    // }
  },
  methods: {
    handeleDate() {
      return {
        disabledDate: (time) => {
          return time.getTime() > Date.now()
        },
      }
    },
    getDict() {
      const params = {
        field: 'HKFS',
      }
      getDict(params).then((res) => {
        console.log(res.data)
        this.hkOptions = res.data
      })
    },
    tabClickBtn(e) {
      if (e.index == 0) {
        this.onLoad_1()
      } else {
        this.onLoad_2()
      }
    },
    onLoad_1() {
      console.log('NTAREA', this.search_1)
      const { daterange } = this.search_1
      const params = {
        ...this.search_1,
        startTime: daterange ? daterange[0] : '',
        endTime: daterange ? daterange[1] : '',
        pageNum: this.page_1.currentPage,
        pageSize: this.page_1.pageSize,
      }
      this.loading_1 = true
      getJrNoRzApprove(params).then((data) => {
        console.log('data', data)
        if (data.status) {
          this.loading_1 = false
          this.data_1 = data.data.records
          this.page_1.total = data.data.total
        }
      })
    },
    onLoad_2() {
      const { RZZT } = this.search_2
      const params = {
        ...this.search_2,
        rzzt: RZZT,
        pageNum: this.page_2.currentPage,
        pageSize: this.page_2.pageSize,
      }
      this.loading_2 = true
      getJrIsRzApprove(params).then((data) => {
        if (data.status) {
          this.loading_2 = false
          this.data_2 = data.data.records
          this.page_2.total = data.data.total
        }
      })
    },
    /* 清空 */
    resetChange(tag) {
      // this.page.currentPage = 1;
      // this.page.pageSize = 10;
      // this.onLoad();
      this[`onLoad_${tag}`]()
    },
    /* 搜索筛选 */
    searchChange_1(params, done) {
      done()
      this.page_1.currentPage = 1
      this.page_1.pageSize = 10
      this.onLoad_1()
    },
    searchChange_2(params, done) {
      done()
      this.page_2.currentPage = 1
      this.page_2.pageSize = 10
      this.onLoad_2()
    },
    verify(row) {
      //this.simpleTableData = createTableData_orgFinanceApply_verify(row)
      this.simpleTableData = org_rzsq_sh(row)
      this.currentRow = row
      this.dialogType = 'verify'
      this.dialogVisble = true
    },
    verifySave() {
      this.$refs['verifyForm'].validate((valid) => {
        if (valid) {
          const { id } = this.currentRow
          const { verifyResult, remark, sxed, sxyxq } = this.verifyData //jrPass
          let params = { id, sxed, sxyxq }
          if (verifyResult === 3) {
            jrPass(params).then((res) => {
              //console.log('jrRefuse',res)
              if (res.status) {
                this.$message({
                  type: 'success',
                  message: res.msg,
                })
                this.onLoad_1()
                this.onLoad_2()
              } else {
                this.$message({
                  type: 'error',
                  message: res.msg,
                })
              }
              this.dialogVisble = false
            })
          } else {
            jrRefuse({ id, remark }).then((res) => {
              //console.log('jrRefuse',res)
              if (res.status) {
                this.$message({
                  type: 'success',
                  message: res.msg,
                })
                this.onLoad_1()
                this.onLoad_2()
              } else {
                this.$message({
                  type: 'error',
                  message: res.msg,
                })
              }
              this.dialogVisble = false
            })
          }
        }
      })
    },
    //放款确定按钮
    paySave() {
      this.$refs['payForm'].validate((valid) => {
        if (valid) {
          const { id } = this.currentRow
          const { fkje, fkrq, fkcp, CJLV, CJLVLX, HKFS, HKQX } = this.payData
          const params = {
            id,
            fkje,
            fkrq,
            fkcp,
            cjlv: CJLV,
            cjlvlx: CJLVLX,
            hkfs: HKFS,
            hkqx: HKQX,
          }
          jrOver(params).then((res) => {
            //console.log('jrRefuse',res)
            if (res.status) {
              this.$message({
                type: 'success',
                message: res.msg,
              })
              this.onLoad_2()
            } else {
              this.$message({
                type: 'error',
                message: res.msg,
              })
            }
            this.dialogVisble = false
          })
        }
      })
    },
    //结清确定按钮
    paySaveTwo() {
      this.$refs['payTwoForm'].validate((valid) => {
        if (valid) {
          const { id } = this.currentRow
          const { hkrq, zdyq } = this.payTwoData
          const params = {
            hkrq,
            zdyq,
            id,
          }
          jrBack(params).then((res) => {
            //console.log('jrRefuse',res)
            if (res.status) {
              this.$message({
                type: 'success',
                message: res.msg,
              })
              this.onLoad_2()
            } else {
              this.$message({
                type: 'error',
                message: res.msg,
              })
            }
            this.dialogVisble = false
          })
        }
      })
    },
    //弹框取消按钮
    closeDiaBtn() {
      this.dialogVisble = false
      //this.$refs.verifyForm.resetFields();
      console.log(this.dialogTitle)
    },
    //查看
    viewOpen(row) {
      console.log('sss', row)
      const { id, RZZT, ORG_ID } = row
      getLiuc({ id }).then((res) => {
        console.log('getLiuc', res)
        if (res.status) {
          this.viewTableData = res.data
          this.dialogTitle = '查看详情'
          //this.simpleTableData = createTableData_orgFinanceApply_view({...row,org_name:this.orgOptions.find(i => i.org_id == ORG_ID).org_name})
          console.log(RZZT)
          if (RZZT === 6) {
            this.simpleTableData = org_rzsq_sh_jq({
              ...row,
              org_name: this.orgOptions.find((i) => i.org_id == ORG_ID)
                .org_name,
            })
            this.currentRow = row
            this.stepList = createStepList({ page: 'rz' }).filter((i) =>
              i.show.includes(RZZT)
            )
            this.stepActive = activeList[RZZT]
            this.dialogType = 'view'
            this.dialogVisble = true
            console.log(
              '1',
              createStepList({ page: 'rz' }).filter((i) =>
                i.show.includes(RZZT)
              )
            )
            console.log('stepList', this.stepList)
            console.log('stepActive', this.stepActive)
          } else {
            this.simpleTableData = org_rzsq_ck({
              ...row,
              org_name: this.orgOptions.find((i) => i.org_id == ORG_ID)
                .org_name,
            })
            this.currentRow = row
            this.stepList = createStepList({ page: 'rz' }).filter((i) =>
              i.show.includes(RZZT)
            )
            this.stepActive = activeList[RZZT]
            console.log(
              '1',
              createStepList({ page: 'rz' }).filter((i) =>
                i.show.includes(RZZT)
              )
            )
            console.log('stepList', this.stepList)
            console.log('stepActive', this.stepActive)
            this.dialogType = 'view'
            this.dialogVisble = true
          }
        } else {
          this.$message({
            type: 'error',
            message: res.msg,
          })
        }
      })
    },
    //放款按钮
    pay(row) {
      console.log(row)
      const { RZZT, product_name, lv_type } = row
      this.simpleTableData = org_rzsq_sh(row)
      this.currentRow = row
      this.dialogTitle = '填写放款信息'
      this.payData = {
        fkcp: product_name,
        fkje: '',
        fkrq: '',
        CJLV: '',
        CJLVLX: lv_type,
        HKQX: '',
        HKFS: '',
      }
      this.dialogType = 'pay'
      this.stepActive = activeList[RZZT]
      this.dialogVisble = true
    },
    //结清按钮
    payTwo(row) {
      console.log(row)
      const { RZZT, product_name, CJLVLX, ORG_ID } = row
      this.payTwoData = {}
      // this.simpleTableData = org_rzsq_sh_jq(row)
      this.simpleTableData = org_rzsq_ck({
        ...row,
        org_name: this.orgOptions.find((i) => i.org_id == ORG_ID).org_name,
      })
      this.currentRow = row
      this.dialogTitle = '填写还款信息'
      this.dialogType = 'payTwo'
      this.dialogVisble = true
    },
    /* 改变页码 */
    currentChange(currentPage) {
      this.page.currentPage = currentPage
    },
  },
}
</script>

<style scoped="scoped" lang="scss">
/deep/ .avue-crud__pagination {
  text-align: center;
}
.dialog-footer {
  text-align: center;
  margin: 20px auto;
}
/deep/ .el-step__head.is-process {
  color: #ccc !important;
  border-color: #ccc !important;
}
/deep/ .el-step__title.is-process {
  color: #ccc !important;
}
</style>
